<template>
  <div>
    <div class="head" style="">
      <div class="th">流次</div>
      <div class="th" v-for="item in 8">{{ item }}</div>
    </div>
    <div class="tr" :style="{ height: tr }" v-for="item in rtable1Arr">
      <div class="td" v-for="item1 in item">{{ item1 }} </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZTable",
  props: {
    rtable1Arr: {
      type: Array,
      default: () => [],
    },
    tr: {
      type: String,
      default: "30px",
    }
  },
  data() {
    return {};
  },
  methods: {},
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },

}
</script>

<style lang="scss" scoped>
.head {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;

  margin: 9px 0;
}

.th {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  border-radius: 1.34px;
  background: rgba(224, 224, 224, 1);
  color: rgba(19, 20, 20, 1);
  font-size: 12px;
}

.tr {
  width: 100%;
  height: 23px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);


  &:nth-child(1n) {
    background: #fff;

  }

  &:nth-child(2n) {
    background: rgba(250, 251, 252, 1);

  }

  &:hover {
    background: #eee;
    cursor: pointer;

  }

  .td {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(83, 88, 117, 1);
    font-size: 10px;
    text-align: center;


  }
}
</style>
